<nz-card [nzBordered]="false">
    <form nz-form [nzLayout]="'inline'">
      <nz-input-group nzSearch [nzSuffix]="suffixButton" style="margin-bottom: 8px; width: 400px">
        <input type="text" name="productCd" [(ngModel)]="q.productCd" nz-input placeholder="Enter product code">
        <ng-template #suffixButton>
            <button (click)="onScroll(false)" nz-button nzType="primary" nzSearch>{{'search' | translate}}</button>
        </ng-template>
      </nz-input-group>
      <standard-form-row [title]="'Brand'" block style="padding-bottom: 4px;">
        <nz-form-item>
          <nz-form-control>
            <tag-select [expandable]="false">
              <nz-tag *ngFor="let i of brandLines; let idx = index" nzMode="checkable" [nzChecked]="i.value" (nzCheckedChange)="changeBrand($event, idx)">
                {{i.text}}
              </nz-tag>
            </tag-select>
          </nz-form-control>
        </nz-form-item>
      </standard-form-row>

      <standard-form-row [title]="'Category'" block style="padding-bottom: 4px;">
        <nz-form-item>
            <nz-form-control>
            <tag-select [expandable]="false">
                <nz-tag *ngFor="let i of categorys; let idx = index" nzMode="checkable" [nzChecked]="i.value" (nzCheckedChange)="changeCategory($event, idx)">
                {{i.text}}
                </nz-tag>
            </tag-select>
            </nz-form-control>
        </nz-form-item>
      </standard-form-row>

      <standard-form-row [title]="'Gender'" block style="padding-bottom: 4px;">
        <nz-form-item>
          <nz-form-control>
            <tag-select [expandable]="false">
              <nz-tag *ngFor="let i of userGroups; let idx = index" nzMode="checkable" [nzChecked]="i.value" (nzCheckedChange)="changeUserGroup($event, idx)">
                {{i.text}}
              </nz-tag>
            </tag-select>
          </nz-form-control>
        </nz-form-item>
      </standard-form-row>

      <standard-form-row [title]="'Season'" [last]="true" block >
        <nz-form-item>
            <nz-form-control>
            <tag-select [expandable]="false">
                <nz-tag *ngFor="let i of seasons; let idx = index" nzMode="checkable" [nzChecked]="i.value" (nzCheckedChange)="changeSeason($event, idx)">
                    {{i.text}}
                </nz-tag>
            </tag-select>
            </nz-form-control>
        </nz-form-item>
      </standard-form-row>
    </form>
</nz-card>

<!-- <div infiniteScroll
        [infiniteScrollThrottle]="500"
        (scrolled)="onScroll(true)"> -->
    <div nz-row [nzGutter]="{ xs: 16, sm: 16, md: 16, lg: 16, xl: 16, xxl: 16 }">
        <div nz-col nzXs="6" nzSm="4" nzMd="3" nzLg="2" *ngFor="let styleRow of list; let idx=index"
            style="min-width:257px;max-width:257px;margin-bottom: 8px">
            <div class="ibox" style="background-color: white">
                <div class="ibox-content product-box">
                    <ng-template #dotTemplate>
                        <div class="dot"></div>
                    </ng-template>
                    <div class="ribbon" *ngIf="styleRow.prods[styleRow.index].isCm==='1'">
                        <div>Rx</div>
                    </div>
                    <div class="ribbon yellow" *ngIf="styleRow.prods[styleRow.index].isAd==='1'">
                        <div>Ad</div>
                    </div>
                    <nz-carousel [nzEffect]="effect" [nzDotRender]="dotTemplate" (nzAfterChange)="selectProd(styleRow, $event)">
                        <div nz-carousel-content class="product-imitation lanren" *ngFor="let prod of styleRow.prods">
                            <img *ngIf="prod.img" src="{{imgSuffix + prod.img}}" class="img-responsive" style="max-height:144px;height: 144px;">
                            <div *ngIf="!prod.img"style="min-height:144px; max-height:144px; text-algin: center; padding-top: 25%">
                                NO Image
                            </div>
                        </div>
                    </nz-carousel>


                    <div class="product-desc">
                        <span class="product-price">
                            {{currency | CurrencyType}} {{styleRow.prods[styleRow.index].realPrice}}
                        </span>
                        <small class="text-muted">
                            {{styleRow.prods[styleRow.index].brand | brandEnPipe | uppercase }}-{{styleRow.prods[styleRow.index].userGroup | userGroupEnPipe}}
                        </small>
                        <div>
                            <a href="javascript:void(0)" (click)="view(styleRow.prods[styleRow.index])"  class="product-name"> {{styleRow.prods[styleRow.index].productCd}}</a>
                            <span class="spec">{{styleRow.prods[styleRow.index].spec}}</span>                            
                        </div>                        
                        <div nz-row *ngIf="level === 'FIRST'">
                            <div nz-col nzMd="24" nzLg="24" nzSm="24" nzXs="24">
                                <small style="color: rgba(0,0,0,.45)">
                                    Stock: <span class="prodattr">{{styleRow.prods[styleRow.index].gmStockSap >= 10 ? 'Sufficient' : (styleRow.prods[styleRow.index].gmStockSap > 0 ? 'Limited' : 'Stockout')}}</span>
                                    <span  nz-tooltip nzTitle="Replenishment date" style="margin-left: 2px; color: #447d14; font-weight: bold;" *ngIf="styleRow.prods[styleRow.index].gmStockSap <= 0 || !styleRow.prods[styleRow.index].gmStockSap">{{styleRow.prods[styleRow.index].repDate}}</span>
                                </small>
                            </div>
                        </div>
                        <div>
                            <small class="text-truncate prodtitle">Frame material: <span class="prodattr">{{styleRow.prods[styleRow.index].pfTexture}}</span></small>
                        </div>
                        <div>
                            <small class="text-truncate prodtitle">Lens material: <span class="prodattr" *ngIf="styleRow.prods[styleRow.index].brand.indexOf('光学') < 0">{{styleRow.prods[styleRow.index].lensTexture }}</span></small>
                        </div>
                        <div>
                            <small class="text-truncate prodtitle">Temple material: <span class="prodattr">{{styleRow.prods[styleRow.index].templeTexture}}</span></small>
                        </div>
                        <div style="padding: 5px 0px;">
                            <nz-button-group *ngIf="addBtn">
                                <button nz-button (click)="minCount(styleRow.prods[styleRow.index])"><i class="anticon anticon-minus"></i></button>
                                <button nz-button (click)="addCount(styleRow.prods[styleRow.index])"><i class="anticon anticon-plus"></i></button>
                            </nz-button-group>

                            <nz-badge *ngIf="cartBtn" [nzOverflowCount]="9999" [nzCount]="styleRow.prods[styleRow.index]['cart']" style="float: right;">
                                <nz-dropdown nzTrigger="click" [nzPlacement]="'topCenter'" nzClickHide="false">
                                    <a nz-dropdown>
                                        <i class="anticon anticon-shopping-cart" style="font-size: 28px;"></i>
                                    </a>
                                    <div nz-menu>
                                        <div nz-menu-item>
                                            <nz-input-number (ngModelChange)="modifyCart(styleRow.prods[styleRow.index], $event)" [nzSize]="'small'"
                                                [(ngModel)]="styleRow.prods[styleRow.index].cart" [nzMin]="0" [nzStep]="1"></nz-input-number>
                                        </div>
                                    </div>
                                </nz-dropdown>
                            </nz-badge>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
    <div *ngIf="hasMore" class="loadmore">
        <button nz-button *ngIf="!loading" (click)="onScroll(true)">loading more</button>
        <nz-spin *ngIf="loading && hasMore" [nzSpinning]="loading"></nz-spin>
    </div>
<!-- </div> -->



<nz-drawer id="drawer" [nzVisible]="visible" [nzWidth]="640" [nzClosable]="false" (nzOnClose)="close()">
    <p class="title" style=" margin-bottom: 24px;">
        {{selectProduct.productCd}}
        <nz-tag [nzColor]="'magenta'" *ngIf="selectProduct.isAd === '1'">Ad</nz-tag>
        <nz-tag [nzColor]="'gold'" *ngIf="selectProduct.isCm === '1'">Rx</nz-tag>
        <nz-tag [nzColor]="'blue'">{{selectProduct.brandLine}}</nz-tag>
        <nz-tag *ngIf="selectProduct.eanCode" [nzColor]="'purple'">{{selectProduct.eanCode}}</nz-tag>
    </p>
    <nz-divider nzText="Basic Info" nzOrientation="left"></nz-divider>
    <div nz-row>
        <div nz-col nzSpan="8">
        <div class="item-wrap">
            <p class="label">Brand:</p> {{selectProduct.brand | brandEnPipe | uppercase}}
        </div>
        </div>
        <div nz-col nzSpan="8">
        <div class="item-wrap">
            <p class="label">Model:</p> {{selectProduct.style}}
        </div>
        </div>
        <div nz-col nzSpan="8">
        <div class="item-wrap">
            <p class="label">Color Code:</p>{{selectProduct.colorCd}}
        </div>
        </div>
    </div>
    <div nz-row>
        <div nz-col nzSpan="8">
            <div class="item-wrap">
                <p class="label">Spec:</p> {{selectProduct.spec}}
            </div>
        </div>
        <div nz-col nzSpan="8">
            <div class="item-wrap">
                <p class="label">Season:</p>{{selectProduct.season}}
            </div>
        </div>
        <div nz-col nzSpan="8">
            <div class="item-wrap">
                <p class="label">Gender:</p>{{selectProduct.userGroup | userGroupEnPipe}}
            </div>
        </div>
    </div>
    <div nz-row>
        <div nz-col nzSpan="8">
            <div class="item-wrap">
                <p class="label">Category:</p> {{selectProduct.category}}
            </div>
        </div>
    </div>
    <nz-divider nzText="Price & Stock" nzOrientation="left"></nz-divider>
    <div nz-row>
        <div nz-col nzSpan="12">
            <div class="item-wrap">
                <p class="label">Price:</p>$ {{price}}
            </div>
        </div>
        <div nz-col nzSpan="12" *ngIf="level === 'FIRST'">
            <div class="item-wrap">
                <p class="label">Stock:</p>{{stock}}
            </div>
        </div>
    </div>

    <nz-divider nzText="Other" nzOrientation="left"></nz-divider>
    <div nz-row>
        <div nz-col nzSpan="24">
            <div class="item-wrap">
            <p class="label">Frame material:</p> {{selectProduct.pfTexture}}
            </div>
        </div>
    </div>
    <div nz-row>
        <div nz-col nzSpan="24">
            <div class="item-wrap">
            <p class="label">Frame color:</p> {{selectProduct.colorSpec}}
            </div>
        </div>
    </div>
    <div nz-row>
        <div nz-col nzSpan="24">
            <div class="item-wrap">
            <p class="label">Lens material:</p> {{selectProduct.lensTexture}}
            </div>
        </div>
    </div>
    <div nz-row>
        <div nz-col nzSpan="24">
            <div class="item-wrap">
            <p class="label">Lens color:</p> {{selectProduct.lensSpec}}
            </div>
        </div>
    </div>
    <div nz-row>
        <div nz-col nzSpan="24">
            <div class="item-wrap">
            <p class="label">Temple material:</p> {{selectProduct.templeTexture}}
            </div>
        </div>
    </div>
    <div nz-row>
        <div nz-col nzSpan="24">
            <div class="item-wrap">
            <p class="label">Temple color:</p> {{selectProduct.templeSpec}}
            </div>
        </div>
    </div>
</nz-drawer>

